<template>
  <div class="education-dashboard" v-if="statusStore.collectMetrics">
    <div class="dashboard-container">
      <div class="panel">
        <div class="panel-title">学员学习时长变化</div>
        <d-chart :option="timeOption" @chartReady="onTimeReady"></d-chart>
      </div>
      <div class="panel">
        <div class="panel-title">知识点掌握率对比</div>
        <d-chart :option="masteryOption" @chartReady="onMasteryReady"></d-chart>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { computed, ref } from 'vue';
import { useChatMessageStore, useChatStatusStore } from '@/store';
import type { IMessage } from '@/types';
const msgStore = useChatMessageStore();
const statusStore = useChatStatusStore();

const assistantMessages = computed(() => msgStore.messages.filter((m: IMessage) => m.from === 'assistant' && m.complete));

const timeSeries = computed(() => assistantMessages.value.map((m, idx) => {
  const start = m.startTime || 0;
  const end = m.endTime || 0;
  const sec = start && end ? Math.round((end - start) / 1000) : 0;
  return { name: `#${idx + 1}`, value: sec };
}));

const sampleTimeSeries = computed(() => [
  { name: '#1', value: 12 },
  { name: '#2', value: 18 },
  { name: '#3', value: 9 },
  { name: '#4', value: 15 },
]);

const masteryMap = computed(() => {
  const map = new Map<string, number[]>();
  assistantMessages.value.forEach((m) => {
    m.education?.mastery?.forEach(({ point, rate }) => {
      const arr = map.get(point) || [];
      arr.push(rate);
      map.set(point, arr);
    });
  });
  return map;
});

const masterySeries = computed(() => {
  const entries = Array.from(masteryMap.value.entries());
  return entries.map(([point, arr]) => ({ point, rate: Math.round(arr.reduce((a, b) => a + b, 0) / arr.length) }));
});

const sampleMasterySeries = computed(() => [
  { point: '二次函数', rate: 60 },
  { point: '时态用法', rate: 45 },
  { point: '网络分析', rate: 55 },
  { point: '二分查找', rate: 50 },
]);

const timeOption = computed(() => ({
  tooltip: {},
  xAxis: { type: 'category', data: (timeSeries.value.length ? timeSeries.value : sampleTimeSeries.value).map((d) => d.name) },
  yAxis: { type: 'value', name: '秒' },
  series: [{ type: 'line', data: (timeSeries.value.length ? timeSeries.value : sampleTimeSeries.value).map((d) => d.value) }],
}));

const masteryOption = computed(() => ({
  tooltip: {},
  xAxis: { type: 'category', data: (masterySeries.value.length ? masterySeries.value : sampleMasterySeries.value).map((d) => d.point) },
  yAxis: { type: 'value', name: '%' },
  series: [{ type: 'bar', data: (masterySeries.value.length ? masterySeries.value : sampleMasterySeries.value).map((d) => d.rate) }],
}));

const onTimeReady = () => {};
const onMasteryReady = () => {};
</script>

<style scoped lang="scss">
@import "devui-theme/styles-var/devui-var.scss";

.education-dashboard {
  width: 100%;
  display: flex;
  justify-content: center;
}

.dashboard-container {
  width: 100%;
  max-width: 1280px;
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
  padding: 0 12px 12px;
}

.panel {
  background-color: $devui-base-bg;
  border: 1px solid $devui-line;
  box-shadow: 0px 6px 20px 0px rgba(25, 25, 25, 0.08);
  border-radius: 12px;
  padding: 12px;
}

.panel-title {
  font-size: 15px;
  font-weight: 600;
  color: $devui-text;
  margin-bottom: 12px;
}

:deep(.devui-charts) {
  width: 100%;
  height: 260px;
}
</style>